<template>
  <div class="scenic-detail">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <el-button type="primary" icon="el-icon-back" @click="goBack"></el-button>
      <span>景点介绍</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-menu-item>选项1</el-menu-item>
          <el-menu-item>选项2</el-menu-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!-- 景点介绍内容 -->
    <el-card class="scenic-info">
      <div class="title">景点介绍</div>
      <div class="content">
        <p>
          7号线和1号线，大概是北京最特别的两条地铁线。自去年9月，总能看到一些人，赶着早高峰出门，和晚上加班结束的打工人一起回来。但他们脸上没有被工作压榨后的疲惫。他们还兴致勃勃，常常身披巫师袍，手拿魔杖，或是抱着恐龙、变形金刚、功夫熊猫和小黄人周边。
        </p>
        <p>
          他们是北京环球度假区的游客。
        </p>
        <p>
          开园一年以来，北京环球度假区数次引领热搜，偶遇的明星、好玩的演出、特色的美食......
        </p>
        <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.NSgtHlUhM0iOg_-Kfy5izQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2=主题公园入口" alt="主题公园入口" class="responsive-image" />
        <p>
          △ 北京环球影城主题公园入口不断的曝光，使得这块“世外桃源”已不再神秘。但无论从什么角度看它，都会发现它生发于电影的本质。它是电影的再现、重塑、续章，是电影的共同体。
        </p>
        <p>
          发现电影彩蛋，和电影里的角色们互动，自我代入到剧情里，是畅游北京环球度假区时最特别的享受。
        </p>
        <p>
          9月20日，是这座主题公园一周岁的生日。Sir想带你们重新走进它，也走进它最深层次的电影内核。
        </p>
        <img src="https://ts4.cn.mm.bing.net/th?id=OIP-C.MYl84xCSuYeM9FAw6sTYLQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2=室内场景" alt="室内场景" class="responsive-image" />
        <p>
          △ 灯光，摄像，开拍！
        </p>
        <h2>01电影基因</h2>
        <p>
          我们为什么需要电影？因为现实无法从物质上、精神上让我们得到满足。
        </p>
        <p>
          我们太需要这一点点超越现实的非分之想（哪怕只有一点点）。
        </p>
        <p>
          瑞瑞是《侏罗纪世界》电影的资深影迷，也是极限运动俱乐部的主理人。她承认，科幻冒险片的巧思助她找到许多策划活动的灵感。shenshen是“小黄人骨灰粉”，看过《神偷奶爸》《小黄人》所有系列电影，她喜爱这些现实不可能存在的小可爱的理由，体现出作为法务工作者的严谨：
        </p>
        <p>
          “小黄人们调皮、捣蛋，随时准备干活，它们的勤劳值得赞赏。”
        </p>
        <img src="https://ts4.cn.mm.bing.net/th?id=OIP-C.rAsRmI1u3LHgel_-fNA6AAHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2=小黄人集市" alt="小黄人集市" class="responsive-image" />
        <p>
          △ 小黄人集市而对于像Sir这些看过以四位数以上电影的影迷来说，电影更多了一层“延长三倍生命”的意义。“看”这个动作已经不满足了。在“看”之余，我们还常常一遍遍在脑海中还原电影场景，想象自己正经历电影中的故事。但，无论怎么发挥想象，影迷离那个世界始终隔着一层银幕。北京环球度假区的出现，打破了这层分界。它让我们第一次体验到，原来自己可以离电影这么近。
        </p>
      </div>
    </el-card>

    <!-- 购票须知 -->
    <el-card class="purchase-notice">
      <div class="title">购票须知</div>
      <div class="content">
        <p>
          儿童：6周岁(含)以下或1.2米(含)以下，免费；6周岁(不含)至18周岁(含)未成年人，半价
        </p>
        <p>
          老人：70周岁(含)以上，需提供本人身份证或老年证，免费；60周岁(含)至69周岁(含)老人，凭老年证或身份证，半价
        </p>
        <p>
          残疾人：凭本人残疾证。一级、二级肢体、智力、视力残疾者可有一名陪护免费进入。，免费
        </p>
        <p>
          军人：现役军人及残疾军人凭有效证件，免费
        </p>
        <p>
          学生：全日制大学本科及以下学历学生凭学生证，半价
        </p>
      </div>
    </el-card>

    <!-- 开放时间 -->
    <el-card class="opening-hours">
      <div class="title">开放时间</div>
      <div class="content">
        <p>
          周一~周日 全天 10:00 – 21:00
        </p>
        <p>
          最晚入园时间：20:00
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resortImage: 'https://placehold.co/600x400?text=主题公园入口',
      indoorScene: 'https://placehold.co/600x400?text=室内场景',
      minionMarket: 'https://placehold.co/600x400?text=小黄人集市'
    };
  },
  methods: {
    goBack() {
      // 这里可以添加返回上一页的逻辑
      console.log('返回上一页');
    }
  }
};
</script>

<style scoped>
.scenic-detail {
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409EFF;
  color: white;
  padding: 0 15px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  margin-bottom: 20px;
}

.responsive-image {
  width: 100%;
  height: auto;
  max-height: 40vh; /* 占屏幕高度的三分之一 */
  display: block;
  margin: 0 auto;
}
</style>
